@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* You can add global styles to this file, and also import other style files */
@layer base {

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    
    --secondary: 0 0% 0%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --ring: 240 5.9% 10%;
    --radius: 0.625rem;

    --primary-100: 257 75% 85%;
    --primary: 257 74% 57%;
    --primary-300: 257 74% 25%;
    --primary-foreground: 210 20% 98%;


    --success-100: 148 48% 80%;
    --success: 148 48% 46%;
    --success-300: 148 48% 10%;

    --destructive-100: 0 84.2% 90%;
    --destructive: 0 84.2% 60.2%;
    --destructive-300: 0 84.2% 40%;
    
    --warning-100: 51.72, 93.55%, 93.92%;
    --warning: 47 96% 53%;
    --warning-300: 28 80% 31%;

    --add-button-shadow: 0px 0px 0px 6px hsl(var(--primary-100));

    --light-blue: 214 16% 70%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    
    --sidebar-background: 0 0% 98.5%;
    --sidebar-foreground: 228 6.49% 15.1%;
    --sidebar-primary: 257 74% 57%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --sidebar-active: 0 0% 90%;
    --sidebar-progress: 0 0% 50%;
  }

.dark {
  --background: 210 15% 12%;
  --foreground: 210 30% 90%;

  --muted: 210 15% 28%;
  --muted-foreground: 210 10% 60%;

  --secondary: 0 0% 100%;
  --secondary-foreground: 0 0% 0%;

  --accent: 210 35% 25%;
  --accent-foreground: 210 90% 95%;

  --primary-100: 210 80% 40%;
  --primary: 210 90% 50%;
  --primary-300: 210 100% 85%;
  --primary-foreground: 210 90% 98%;

  --success-100: 140 60% 40%;
  --success: 140 80% 50%;
  --success-300: 140 90% 85%;

  --destructive-100: 0 70% 38%;
  --destructive: 0 80% 50%;
  --destructive-300: 0 85% 88%;

  --warning-100: 40 90% 50%;
  --warning: 40 100% 45%;
  --warning-300: 40 100% 30%;

  --border: 210 15% 25%;
  --input: 210 15% 22%;

  --ring: 210 90% 60%;
  --radius: 0.625rem;

  --add-button-shadow: 0 0 0 6px hsl(var(--primary-100) / 0.4);

  --chart-1: 210 85% 55%;
  --chart-2: 160 80% 50%;
  --chart-3: 35 90% 55%;
  --chart-4: 280 75% 65%;
  --chart-5: 340 80% 60%;

  --sidebar-background: 210 15% 10%;
  --sidebar-foreground: 210 20% 85%;
  --sidebar-primary: 210 85% 65%;
  --sidebar-primary-foreground: 210 90% 98%;
  --sidebar-accent: 210 25% 18%;
  --sidebar-accent-foreground: 210 30% 90%;
  --sidebar-border: 210 15% 22%;
  --sidebar-ring: 210 90% 70%;
  --sidebar-active: 210 15% 25%;
  --sidebar-progress: 210 15% 40%;
}


}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }
}

.react-flow__panel.react-flow__attribution.bottom.right {
  display: none;
}

.react-flow {
  --xy-edge-stroke-selected-default: #b1b1b7 !important;
  --node-boxshadow-selected-default: 0 0 0 0 #b1b1b7 !important;
  --selection-border-default: 0px solid #b1b1b7 !important;
  --node-border-default: 0px solid #b1b1b7 !important;
  --xy-selection-border-default: 1px dotted hsl(var(--primary-300)) !important;
  --xy-selection-background-color-default: hsl(var(--primary-100)/0.25) !important;
}

.react-flow__pane.selection,
.react-flow__nodesselection-rect {
  cursor: default !important;
}

.react-flow__edge.selectable>path {
  /* If necessary, add !important to the rule */
  pointer-events: none !important;
}

/* This is a hack to fix the issue with the pointer events being set to none when the vaul drawer is open */
body {
  pointer-events: auto !important;
}

@layer utilities {
  .scrollbar-hover {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .scrollbar-hover::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-hover::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-hover::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 9999px;
    transition: opacity 0.2s;
  }

  .scrollbar-hover:hover::-webkit-scrollbar-thumb,
  .group:hover .scrollbar-hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .dark .scrollbar-hover:hover::-webkit-scrollbar-thumb,
  .dark .group:hover .scrollbar-hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .scrollbar-hover:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  .dark .scrollbar-hover:hover {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .group:hover .scrollbar-hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  .dark .group:hover .scrollbar-hover {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .scrollbar-none {
    scrollbar-width: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}